﻿<div class="demo-description" id="Overview">
    <h2><DemoNavLink Link="CheckBox#Overview" />CheckBox - Overview</h2>
    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1">CheckBox</a> component is a check editor that allows users to select yes/no or true/false. To change the editor’s state (check/uncheck/indeterminate), click it or press <b>SPACE</b> when the editor is focused.
    </p>
    <p>
        You can bind the CheckBox’s state to Boolean, Nullable Boolean, Enum, Int16, etc. property types.
    </p>
    <p>
        The main CheckBox API members are listed below.
    </p>
    <p>
        <ul>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.Checked">Checked</a> - Specifies whether the checkbox editor is checked.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.CheckedChanged">CheckedChanged</a> - Fires when the editor’s state changes.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCheckBox-1.LabelPosition">LabelPosition</a> - Specifies the position of an editor’s child content relative to the check mark.
            </li>
            <li>
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxDataEditorBase-2.Enabled">Enabled</a> - Specifies whether the editor is enabled.
            </li>
        </ul>
    </p>
</div>



<div class="card demo-card demo-card-sm">
    <div class="card-body">
        <div class="container overflow-auto">
            <label class="mb-2 pb-1">Choose your new car options:</label>
            <div class="row">
                <div class="col col-auto">
                    <DxCheckBox @bind-Checked="@Multimedia" CssClass="mb-1">Multimedia</DxCheckBox>
                    <DxCheckBox @bind-Checked="@AirConditioning" CssClass="mb-1">Air conditioning</DxCheckBox>
                    <DxCheckBox @bind-Checked="@ParkingSensors" CssClass="mb-1">Parking camera</DxCheckBox>
                    <DxCheckBox @bind-Checked="@HeatedSeats" CssClass="mb-1">Heated seats</DxCheckBox>
                    <b class="mt-3">Total price:</b>
                </div>
                <div class="col">
                    <div class="mb-1" style="@GetStyle(Multimedia)">$130</div>
                    <div class="mb-1" style="@GetStyle(AirConditioning)">$800</div>
                    <div class="mb-1" style="@GetStyle(ParkingSensors)">$400</div>
                    <div class="mb-1" style="@GetStyle(HeatedSeats)">$230</div>
                    <div style="@GetStyle(true)">
                        <b class="mt-3">$@GetTotalPrice()</b>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@code{
    bool AirConditioning { get; set; } = true;
    bool Multimedia { get; set; } = false;
    bool ParkingSensors { get; set; } = false;
    bool HeatedSeats { get; set; } = true;

    decimal GetTotalPrice() {
        decimal price = 0;
        price += Multimedia ? 130 : 0;
        price += AirConditioning ? 800 : 0;
        price += ParkingSensors ? 400 : 0;
        price += HeatedSeats ? 230 : 0;
        return price;
    }
    string GetStyle(bool selected) {
        return "text-align:center;" + (selected ? "" : "text-decoration:line-through;");
    }
}

<CodeSnippet_Editor_CheckBox/>
